<%@ page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootshop online Shopping cart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
<!--Less styles -->
   <!-- Other Less css file //different less files has different color scheam
	<link rel="stylesheet/less" type="text/css" href="themes/less/simplex.less">
	<link rel="stylesheet/less" type="text/css" href="themes/less/classified.less">
	<link rel="stylesheet/less" type="text/css" href="themes/less/amelia.less">  MOVE DOWN TO activate
	-->
	<!--<link rel="stylesheet/less" type="text/css" href="themes/less/bootshop.less">
	<script src="themes/js/less.js" type="text/javascript"></script> -->
	
<!-- Bootstrap style --> 
    <link id="callCss" rel="stylesheet" href="themes/bootshop/bootstrap.min.css" media="screen"/>
    <link href="themes/css/base.css" rel="stylesheet" media="screen"/>
<!-- Bootstrap style responsive -->	 
	<link href="themes/css/bootstrap-responsive.min.css" rel="stylesheet"/>
	<link href="themes/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- Google-code-prettify -->	
	<link href="themes/js/google-code-prettify/prettify.css" rel="stylesheet"/>
<!-- fav and touch icons -->
    <link rel="shortcut icon" href="themes/images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="themes/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="themes/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="themes/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="themes/images/ico/apple-touch-icon-57-precomposed.png">
	<style type="text/css" id="enject"></style>
  </head>
<body>
<jsp:include page="header.jsp"/>
<!-- Header End====================================================================== -->
<div id="mainBody">
	<div class="container">
	<div class="row">
<!-- Sidebar ================================================== -->
	<jsp:include page="sider.jsp"/>
<!-- Sidebar end=============================================== -->
	<div class="span9">
    <ul class="breadcrumb">
		<li><a href="${pageContext.request.contextPath }/prototype/second">Home</a> <span class="divider">/</span></li>
		<li class="active"> SHOPPING CART</li>
    </ul>
	<h3>  ORDERITEMS  [ <small>${countss } Item(s) </small>]<span id="onlyspan" style="color:green"></span>
	<a href="${pageContext.request.contextPath }/prototype/products.jsp" class="btn btn-large pull-right"><i class="icon-arrow-left"></i> Continue Shopping </a></h3>	
	<hr class="soft"/>
	<c:if test="${empty user }">
	<table class="table table-bordered">
		<tr><th> I AM ALREADY REGISTERED  </th></tr>
		 <tr> 
		 <td>
			<form class="form-horizontal" action="user/login" method="post">
				<div class="control-group">
				  <label class="control-label" for="inputUsername">E-Mail</label>
				  <div class="controls">
					<input type="text" id="inputUsername" name="emails" placeholder="E-Mail">
					<span id="myspans" style="color:red"></span>
				  </div>
				</div>
				<div class="control-group">
				  <label class="control-label" for="inputPassword1">Password</label>
				  <div class="controls">
					<input type="password" id="inputPassword1" name="passwords" placeholder="Password">
				  </div>
				</div>
				<div class="control-group">
				  <div class="controls">
					<button type="button" class="btn" onclick="logins()">Sign in</button> OR <a href="register.jsp" class="btn">Register Now!</a>
				  </div>
				</div>
				<div class="control-group">
					<div class="controls">
					  <a href="forgetpass.jsp" style="text-decoration:underline">Forgot password ?</a>
					</div>
				</div>
			</form>
		  </td>
		  </tr>
	</table>		
	</c:if>		
	<table class="table table-bordered">
              <thead>
                <tr>
                  <th>Product</th>
                  <th>Description</th>
                  <th>Quantity/Update</th>
				  <th>Price</th>
                  <th>Discount</th>
                  <th>Tax</th>
                  <th>Total</th>
				</tr>
              </thead>
              <tbody>
              <c:forEach items="${commodities }" var="c">
                <tr>
                  <td> 
                  			<c:forEach items="${c.product.pictures }" var="ps">
			  				<c:if test="${ps.cover!=0 }">
							<a href="${pageContext.request.contextPath }/prototype/details?id=${c.product.id }"><img width="60" src="${ps.path }" alt=""/></a>
							</c:if>
							</c:forEach>
                  </td>
                  <td>${c.product.name }<br/>Color : ${c.product.color }, Material : metal</td>
				  <td>
					<div class="input-append">	
					<%-- <input class="span1" style="max-width:34px" onblur="changes(${c.id })" name="changenum" value="${c.amount }" placeholder="${c.amount }" id="appendedInputButtons${c.id }" size="16" type="text">
					<button class="btn" type="button" onclick="small(${c.id })"><i class="icon-minus"></i></button>
					<button class="btn" type="button" onclick="large(${c.id })"><i class="icon-plus"></i></button>
					<button class="btn btn-danger" type="button" onclick="del(${c.id })"><i class="icon-remove icon-white"></i></button> --%>
					<p>${c.amount }</p>
					</div>
				  </td>
                  <td>$${c.product.price }0</td>
                  <td>$${c.product.discount*c.product.price }0</td>
                  <td>$${c.product.tax*c.product.price }0</td>
                  <td id="total${c.id }">$${(c.product.price+c.product.tax*c.product.price-c.product.discount*c.product.price)*c.amount }0</td>
                </tr>
                </c:forEach>
				<!-- <tr>
                  <td> <img width="60" src="themes/images/products/8.jpg" alt=""/></td>
                  <td>MASSA AST<br/>Color : black, Material : metal</td>
				  <td>
					<div class="input-append"><input class="span1" style="max-width:34px" placeholder="1"  size="16" type="text"><button class="btn" type="button"><i class="icon-minus"></i></button><button class="btn" type="button"><i class="icon-plus"></i></button><button class="btn btn-danger" type="button"><i class="icon-remove icon-white"></i></button>				</div>
				  </td>
                  <td>$7.00</td>
                  <td>--</td>
                  <td>$1.00</td>
                  <td>$8.00</td>
                </tr>
				<tr>
                  <td> <img width="60" src="themes/images/products/3.jpg" alt=""/></td>
                  <td>MASSA AST<br/>Color : black, Material : metal</td>
				  <td>
					<div class="input-append"><input class="span1" style="max-width:34px" placeholder="1"  size="16" type="text"><button class="btn" type="button"><i class="icon-minus"></i></button><button class="btn" type="button"><i class="icon-plus"></i></button><button class="btn btn-danger" type="button"><i class="icon-remove icon-white"></i></button>				</div>
				  </td>
                  <td>$120.00</td>
                  <td>$25.00</td>
                  <td>$15.00</td>
                  <td>$110.00</td>
                </tr> -->
				
                <tr>
                  <td colspan="6" style="text-align:right">Total Price:	</td>
                  <td id="totalPrice"> $${totalPrice }0</td>
                </tr>
				 <tr>
                  <td colspan="6" style="text-align:right">Total Discount:	</td>
                  <td id="totalDiscount"> $${totalDiscount }0</td>
                </tr>
                 <tr>
                  <td colspan="6" style="text-align:right">Total Tax:	</td>
                  <td id="totalTax"> $${totalTax }0</td>
                </tr>
				 <tr>
                  <td colspan="6" style="text-align:right"><strong>TOTAL ($${totalPrice }0 - $${totalDiscount }0 + $${totalTax }0) =</strong></td>
                  <td class="label label-important" style="display:block" id="totalmoney"> <strong> $${totalprice }0 </strong></td>
                </tr>
				</tbody>
            </table>
		
		
            <table class="table table-bordered">
			<tbody>
				 <tr>
                  <td> 
				<form class="form-horizontal">
				<div class="control-group">
				<label class="control-label"><strong> VOUCHERS CODE: </strong> </label>
				<div class="controls">
				<input type="text" class="input-medium" placeholder="CODE">
				<button type="submit" class="btn"> ADD </button>
				</div>
				</div>
				</form>
				</td>
                </tr>
				
			</tbody>
			</table>
			
			<table class="table table-bordered">
			 <tr><th>ESTIMATE YOUR SHIPPING </th></tr>
			 <tr> 
			 <td>
				<form class="form-horizontal">
				  <div class="control-group">
					<label class="control-label" for="inputCountry">Country </label>
					<div class="controls">
					  <input type="text" id="inputCountry" placeholder="Country">
					</div>
				  </div>
				  <div class="control-group">
					<label class="control-label" for="inputPost">Post Code/ Zipcode </label>
					<div class="controls">
					  <input type="text" id="inputPost" placeholder="Postcode">
					</div>
				  </div>
				  <div class="control-group">
					<div class="controls">
					  <button type="submit" class="btn">ESTIMATE </button>
					</div>
				  </div>
				</form>				  
			  </td>
			  </tr>
            </table>		
	<a href="${pageContext.request.contextPath }/prototype/listall" class="btn btn-large"><i class="icon-arrow-left"></i> Continue Shopping </a>
	<a href="${pageContext.request.contextPath }/prototype/second" class="btn btn-large pull-right">Next <i class="icon-arrow-right"></i></a>
	
</div>
</div></div>
</div>
<!-- MainBody End ============================= -->
<!-- Footer ================================================================== -->
<jsp:include page="footer.jsp"/>
<!-- Placed at the end of the document so the pages load faster ============================================= -->
	<script src="themes/js/jquery.js" type="text/javascript"></script>
	<script src="themes/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="themes/js/google-code-prettify/prettify.js"></script>
	
	<script src="themes/js/bootshop.js"></script>
    <script src="themes/js/jquery.lightbox-0.5.js"></script>
	
	<!-- Themes switcher section ============================================================================================= -->
<jsp:include page="theme.jsp"/>
</body>
<script type="text/javascript">
	function logins(){
		var email = document.getElementsByName("emails").item(0).value;
		var password = document.getElementsByName("passwords").item(0).value;
		
		var xmlHttp = new XMLHttpRequest();
		var url = "${pageContext.request.contextPath }/prototype/user/login?email="+email+"&password="+password;
		xmlHttp.open("get",url,true);
		xmlHttp.send();
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.status == 200){
				if(xmlHttp.readyState == 4){
					var s = xmlHttp.responseText;
					
					if(s == "0"){
						document.getElementById("myspans").innerHTML="Username or password error!";
					}else if(s == "1"){
						location.href="${pageContext.request.contextPath }/prototype/index.jsp";
					}
				}
			}
		};
	}
	function small(str){
		var key = "appendedInputButtons"+str;
		var key1 = "total"+str;
		var value = document.getElementById(key).value;
		var total = document.getElementById(key1);
		var totalPrice = document.getElementById("totalPrice");
		var totalDiscount = document.getElementById("totalDiscount");
		var totalTax = document.getElementById("totalTax");
		var totalmoney = document.getElementById("totalmoney");
		if (value<=1) {
			document.getElementById("onlyspan").style.color = "red";
			document.getElementById("onlyspan").innerHTML="amount less than one!!";
		}else{
		var xmlHttp = new XMLHttpRequest();
		var url = "${pageContext.request.contextPath }/prototype/cartlower?id="+str;
		xmlHttp.open("get",url,true);
		xmlHttp.send();
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.status == 200){
				if(xmlHttp.readyState == 4){
					var s = xmlHttp.responseText;
					var arr = s.split(",");
					total.innerHTML = "$"+arr[0]+"0";
					totalPrice.innerHTML = "$"+arr[3]+"0";
					totalDiscount.innerHTML = "$"+arr[1]+"0";
					totalTax.innerHTML = "$"+arr[2]+"0";
					totalmoney.innerHTML = "$"+arr[4]+"0";
					document.getElementById(key).value = value-1;
					document.getElementById("onlyspan").innerHTML="change successfully!!";
				}
			}
		};
	};
}
	function large(str){
		var key = "appendedInputButtons"+str;
		var key1 = "total"+str;
		var value = document.getElementById(key).value;
		var total = document.getElementById(key1);
		var totalPrice = document.getElementById("totalPrice");
		var totalDiscount = document.getElementById("totalDiscount");
		var totalTax = document.getElementById("totalTax");
		var totalmoney = document.getElementById("totalmoney");
		var xmlHttp = new XMLHttpRequest();
		var url = "${pageContext.request.contextPath }/prototype/cartmore?id="+str;
		xmlHttp.open("get",url,true);
		xmlHttp.send();
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.status == 200){
				if(xmlHttp.readyState == 4){
					var s = xmlHttp.responseText;
					var arr = s.split(",");
					total.innerHTML = "$"+arr[0]+"0";
					totalPrice.innerHTML = "$"+arr[3]+"0";
					totalDiscount.innerHTML = "$"+arr[1]+"0";
					totalTax.innerHTML = "$"+arr[2]+"0";
					totalmoney.innerHTML = "$"+arr[4]+"0";
					document.getElementById("onlyspan").innerHTML="change successfully!!";
					document.getElementById(key).value = Number(value)+1;
				}
			}
		};
	};

	
	function del(str){
		
		location.href = "${pageContext.request.contextPath }/prototype/addcart3?id="+str;
		
	};

</script>
</html>